<template>
  <form @submit.prevent="handleLogin" class="login-form">
    <div v-if="userStore.error" class="error-message">
      {{ userStore.error }}
    </div>
    <div class="form-group">
      <label for="account">用户名</label>
      <input 
        type="text" 
        id="account" 
        v-model="account" 
        placeholder="请输入用户名/邮箱"
        required
        :disabled="userStore.isLoading"
      >
    </div>
    <div class="form-group">
      <label for="password">密码</label>
      <input 
        type="password" 
        id="password" 
        v-model="password" 
        placeholder="请输入密码"
        required
        :disabled="userStore.isLoading"
      >
    </div>
    <div class="form-options">
      <label class="remember-me">
        <input type="checkbox" v-model="rememberMe">
        记住我
      </label>
      <a href="#" class="forgot-password">忘记密码？</a>
    </div>
    <button 
      type="submit" 
      class="login-btn" 
      :disabled="userStore.isLoading"
    >
      {{ userStore.isLoading ? '登录中...' : '登录' }}
    </button>
    <div class="register-link">
      还没有账号？<router-link to="/register">立即注册</router-link>
    </div>
  </form>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '../stores/userStore'

const router = useRouter()
const userStore = useUserStore()
const account = ref('')
const password = ref('')
const rememberMe = ref(false)
const loading = ref(false)

const handleLogin = async () => {
  if (!account.value || !password.value) {
    return
  }

  try {
    loading.value = true
    
    // 登录
    const userData = await userStore.login(account.value, password.value)
    
    // 登录成功后获取用户的活动数据
    try {
      await userStore.fetchUserAllActivities(userData.id)
    } catch (error) {
      console.error('获取用户活动数据失败:', error)
      // 这里我们不阻止登录流程，只是记录错误
    }
    
    // 登录成功后跳转
    router.push('/')
    
  } catch (error) {
    console.error('登录失败:', error)
  } finally {
    loading.value = false
  }
}
</script>

<style scoped>
.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  color: var(--text-color);
}

.form-group input {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  font-size: 14px;
}

.form-group input:focus {
  border-color: var(--primary-color);
  outline: none;
}

.form-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.remember-me {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-light);
}

.forgot-password {
  color: var(--primary-color);
  font-size: 14px;
  text-decoration: none;
}

.login-btn {
  width: 100%;
  padding: 12px;
  background: var(--primary-color);
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  margin-bottom: 16px;
}

.login-btn:hover {
  background: #0052a3;
}

.register-link {
  text-align: center;
  color: var(--text-light);
  font-size: 14px;
}

.register-link a {
  color: var(--primary-color);
  text-decoration: none;
}

.register-link a:hover {
  text-decoration: underline;
}

.error-message {
  background: #fee;
  color: #e44;
  padding: 10px;
  border-radius: 4px;
  margin-bottom: 20px;
  font-size: 14px;
}

.login-btn:disabled {
  background: #ccc;
  cursor: not-allowed;
}
</style> 